<template>
  <div class="coreRevenue clearfix">
       <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
       <div class="heading">收入分析：<span class="redTitle">{{mainTopicContent}}</span></div>
       <div class="content">
         <div class="tableBox">
         <el-table
           border
           stripe
           style="width: 100%"
           class="tableTh28"
           ref="table"
           :data="tableData"
           :span-method="arraySpanMethod"
         >
           <el-table-column fixed :label="accMonth+'收入环比（万元）'" prop="class2" class-name="first-title" width="20"></el-table-column>
           <el-table-column fixed  :label="accMonth+'收入环比（万元）'" prop="class1" class-name="second-title" width="50"></el-table-column>
           <el-table-column fixed  :label="accMonth+'收入环比（万元）'" prop="indexName" class-name="third-title" width="90"></el-table-column>
           <el-table-column v-for="(item,index) in colList" :prop="'data'+index" :label="item" :key="index" min-width="40">
           <template slot-scope="scope">
                    <span v-if="scope.row['data'+index]>0"  style="color:#5585bf">{{scope.row['data'+index]}}</span>
                    <span v-else style="color: #c00000">{{scope.row['data'+index]}}</span>
             </template>
           </el-table-column>
         </el-table>
         </div>
         <div class="desc">
            <div class="positiveNumber">
                <div class="title">主要环比正项因素<br>(共{{increaseAmount}}万元)</div>
                <ul class="flexUl">
                  <li  v-for="(item,index) in rightIncreaseData" ><span class="indexName" >{{+index+1}}、{{item.indexName}}</span><span class="amount">{{item.amount}}万元</span></li>
                </ul>
            </div>
            <div class="negative">
                <div class="title">主要环比负项因素<br>(共{{decreaseAmount}}万元)</div>
                <ul class="flexUl">
                  <li  v-for="(item,index) in rightDecreaseData" ><span class="indexName" >{{+index+1}}、{{item.indexName}}</span><span class="amount">{{item.amount}}万元</span></li>
                </ul>
            </div>
         </div>
       </div>
  </div>
</template>

<script>
import businessIncome from "@/views/budget/showPdf/showEchart/businessIncome";
import itcIncome from "@/views/budget/showPdf/showEchart/itcIncome";
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import {getCookie} from "@/common/js/cookie"
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
    export default {
        name: "mainRevenue",
        components:{
          businessIncome,
          itcIncome,
        },
          props: ["areaId", "month"],
       data(){
         return{
             tableData:[],
             accMonth:'',
             mainTopicContent:'',
             colList:[],
             rightDecreaseData:{},
             rightIncreaseData:{},
             rightDecreaseIndexName:{},
             rightDecreaseAmount:{},
             decreaseAmount:'',
             increaseAmount:'',

         }
       },
       methods:{
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
           if (columnIndex == 0 || columnIndex == 1  || columnIndex == 2 ) {
               return this.spanArr[rowIndex][columnIndex];
               }
          },
         getTrendDataByAccMonth(){
           var that = this
           $budgetAPI.getTrendDataByAccMonth(
           { areaId:this.areaId,
            accMonth:this.month},
           res => {
             if(res && res.code == 0 ){
               that.accMonth = res.content.accMonth.substring(5,6)+'月份';
               that.mainTopicContent = res.content.mainTopicContent.split('环')[0]+'环'+res.content.mainTopicContent.split('环')[1]+'从费用使用构成维度看，环'+res.content.mainTopicContent.split('环')[2]
               that.tableData = res.content.leftTableData.data;
               let colList1=[]
               colList1 = res.content.leftTableData.colList;
                 that.colList[0] = res.content.leftTableData.colList[0]
               for(let i=1;i<colList1.length;i++){
                  that.colList[i] = colList1[i].substring(2,6)
               }
               res.content.leftTableData.data.map((item,index) =>{
                     for(let i=0;i<item.dataList.length;i++){
                       item['data'+i] = Math.round(Number(item.dataList[i]))
                     }
               })
               // that.formmateMonth();
               that.spanArr = mergeSpan(that.tableData, [
                "class2",
                "class1",
                "indexName"
              ]);


                for(let i=0;i<6;i++){
                  if(res.content.rightDecreaseData.length<=6){
                    that.rightDecreaseData = res.content.rightDecreaseData
                    break;
                  }
                  that.rightDecreaseData[i] = res.content.rightDecreaseData[i]
                }
                for(let i=0;i<6;i++){
                  if(res.content.rightIncreaseData.length<=6){
                      that.rightIncreaseData = res.content.rightIncreaseData
                    break;
                  }
                  that.rightIncreaseData[i] = res.content.rightIncreaseData[i]
                }


              that.increaseAmount = res.content.increaseAmount
              that.decreaseAmount = res.content.decreaseAmount

         }else {
              this.alertError(res);
            }
            setTimeout(()=>{
              this.$refs.table.doLayout();
            },500);
           },
            err => {}
            )
         },

       },
    }
</script>

<style  lang="scss" scoped>
.coreRevenue{
   padding: 20px;
   border:1px solid #dee5f3;
   border-radius:5px;
   margin-top: 20px;
   position:relative;
   .coreRevenue.clearfix:after,.coreRevenue.clearfix:before{
     content: "";
     display: table;
   }
   .coreRevenue.clearfix:after{
     clear: both;
   }
   .coreRevenue.clearfix{
     *zoom: 1;
   }
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
   .heading{
     font-size: 22px;
     font-weight: 700;
     text-align: center;
     padding-bottom: 40px;
     .redTitle{
       color:#c00000
     }
   }

  .content{
     display: flex;
     .tableBox{
       flex:8;
       margin-right: 10px;
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
      /deep/ .el-table.tableTh28 {
        .cell{
          padding: 0 !important;
          transform:scale(0.9);
          line-height: normal !important;

        }
             // transform:scale(0.7);
         th {
           font-size: 12px;
           height: 23px;
           padding: 0;
           .cell{
             line-height: 20px;
               height: 20px;
             // height: 15px;
             // padding: 0;

           }
         }
        /deep/ tr.el-table__row td {
           font-size: 12px;
           padding: 0 !important;
         }
       }
        /deep/ .tableTh28 .el-table__header{
        .first-title.is-leaf {
             position: relative;
             border-right: 1px solid #d7e5fb !important;
             .cell {
              color: #d7e5fb;
             }
         }

         .second-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
              color: #d7e5fb;
           }
         }
         .third-title.is-leaf {
           overflow: visible;
           .cell {
             // transform: translateX(-90%);
             width: 300%;
             left: -150%;
           }
         }
       }
      /deep/ .el-table tr:last-child td {
          color: #333;
          text-align: center;
          border-bottom: 1px solid #bfbfbf !important;
          border-right: 1px solid #bfbfbf !important;
      }
     }
       .desc{
         flex:2;
         display: flex;
         flex-direction: column;
         .positiveNumber{
           border:1px solid #5585bf;
           padding: 15px;
           border-radius: 5px;
           flex:1;
           overflow: hidden;
            .title{
              font-size: 16px;
              font-weight: 700;
              color:#5585bf;
              text-align: center;
              }
              ul{
                display: flex;
                flex-direction: column;
                li{
                  flex:1;
                  padding-top:10px;
                  .indexName{
                    font-weight:700;
                  }
                  .amount{
                    color:#c00000;
                    float: right;
                  }
                }
              }
           }
          .negative{
             flex:1;
             overflow: hidden;
            margin-top:15px;
            border:1px solid #c00000;
            padding: 15px;
            border-radius: 5px;
            .title{
              font-size: 16px;
              font-weight: 700;
              color:#c00000;
              text-align: center;
               }
               ul{
                 display: flex;
                 flex-direction: column;
                 li{
                   flex:1;
                   padding-top:5px;
                   .indexName{
                     font-weight:700;
                   }
                   .amount{
                     color:#c00000;
                     float: right;
                   }
                 }
               }
             }
        }
   }
   }
</style>
